<!-- 订单时段统计 -->
<div class="box ">
  <div class="box-body">
    <div class="row">
      <form class="form-inline" action="{{route('dataOrder.index')}}" pjax-container>
        <div class="col-xs-2">
          <div class="form-group">
            <label>游戏区服</label>
              <select name="server_id" class="form-control" style="width: 150px;">
                <option value="0">全服</option>
                @foreach ($server as $server_id=>$name)
                    @if($server_id == $s_id)
                    <option value="{{$server_id}}" selected="selected">{{ $name }}</option>
                    @else
                    <option value="{{$server_id}}">{{ $name }}</option>
                    @endif
                @endforeach
              </select>
          </div>
        </div>
        <div class="col-xs-2">
          <div class="form-group">
            <label>日期</label>
             <input type="text" class="form-control" id="date-time" value="{{$date_time}}" name="date_time">
          </div>
        </div>
        <button type="submit" class="btn btn-default">查询</button>
      </form>
    </div>
  </div>
</div>

 <div class="row">
        <div class="col-md-6">
          <!-- Line chart -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <i class="fa fa-bar-chart-o"></i>
              <h3 class="box-title">充值金额统计</h3>
            </div>
            <div class="box-body">
                  <canvas id="Chart" style="height:300px; width:100%"></canvas>
            </div>
            <!-- /.box-body-->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->

        <div class="col-md-6">
          <!-- Donut chart -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <i class="fa fa-bar-chart-o"></i>
              <h3 class="box-title">充值人数订单数量统计</h3>
            </div>
            <div class="box-body">
              <canvas id="num-chart" style="height:300px; width:100%"></canvas>
            </div>
            <!-- /.box-body-->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
  </div>

<div class="row">
  {{--充值档位统计--}}
  <div class="col-md-6">
    <!-- Line chart -->
    <div class="box box-primary">
      <div class="box-header with-border">
        <i class="fa fa-bar-chart-o"></i>
        <h3 class="box-title">充值档位数量统计</h3>
      </div>
      <div class="box-body">
        <canvas id="top-up" style="height:300px; width:100%"></canvas>
      </div>
      <!-- /.box-body-->
    </div>
    <!-- /.box -->
  </div>
  <!-- /.col -->

</div>


<script>
    var hours = @json($hours);
    var amounts = @json($amounts);//时段人数值
    var order_numbers = @json($order_numbers);//时段人数值
    var pay_people_numbers = @json($pay_people_numbers);//充值人数
    var level_amount = @json($level_amount);//档位金额
    var level_number = @json($level_number);//档位数量

$(function () {
 $('#date-time').datetimepicker({
          "format": "YYYY-MM-DD",
          "locale": "zh-CN"
  });
   var num_ctx = document.getElementById("num-chart").getContext('2d');
 new Chart(num_ctx, {
    type: 'line',
    data: {
        labels: hours,
        datasets: [{
            label: '订单数量',
            data: order_numbers,
            // 线条颜色
            borderColor: "rgba(68,190,190,1)",
            // 填充颜色
            fill: true,
            // 线条下方的填充颜色
            backgroundColor: "rgba(68,190,190,.3)"
        },
        {
            label: "充值人数",
            data: pay_people_numbers,
            borderColor: "rgba(250,150,30,1)",
            // 取消填充后，只有图例中会显示相应背景色
            backgroundColor: "rgba(250,150,30,.3)",
            // 取消填充
            fill: false
        }]
    },
    options: {
        // 图表标题
        title: {
            display: true,
            text: "当日时段充值人数、订单数统计"
        },
        // 图例设置
        legend: {
            labels: {
                padding: 30,
                // 使用圆形样式
                usePointStyle: true
            },
            // 显示位置
            position: 'bottom'
        },
        // tooltip提示样式
        tooltips: {
            enabled: true,
            // 同时显示x轴上的数据
            mode: 'index',
            // 通过回调修改tooltips的标题
            callbacks: {
                title: function (item) {
                    return  item[0].xLabel + "时"
                }
            }
        },
          scales: {
               yAxes: [{
                   ticks: {
                       beginAtZero:true
                   }
               }]
           }
    }
});
   var ctx = document.getElementById("Chart").getContext('2d');
   var data ={
       type: 'line',
       data: {
           labels: hours,
           datasets: [{
               label: '充值金额(元)',
               data: amounts,
               backgroundColor: 'rgba(255, 99, 132, 0.6)',
               borderColor: 'rgba(255,99,132,1)',
               borderWidth: 1
           }]
       },
        options: {
          // 图表标题
          title: {
              display: true,
              text: "当日时段充值金额统计"
          },
          // 图例设置
          legend: {
              labels: {
                  padding: 30,
                  // 使用圆形样式
                  usePointStyle: true
              },
              // 显示位置
              position: 'bottom'
          },
          // tooltip提示样式
          tooltips: {
              enabled: true,
              // 同时显示x轴上的数据
              mode: 'index',
              // 通过回调修改tooltips的标题
              callbacks: {
                  title: function (item) {
                      return  item[0].xLabel + "时"
                  }
              }
          },
            scales: {
               yAxes: [{
                   ticks: {
                       beginAtZero:true
                   }
               }]
           }
    }
   };
    new Chart(ctx,data);


  //充值档位统计
  var top_up = document.getElementById("top-up").getContext('2d');
  var top_up_data ={
    type: 'line',
    data: {
      labels: level_amount,
      datasets: [{
        label: '数量',
        data: level_number,
        borderColor: "rgba(250,150,30,1)",
        backgroundColor: "rgba(250,150,30,.3)",
        borderWidth: 1
      }]
    },
    options: {
      // 图表标题
      title: {
        display: true,
        text: "当日充值档位数量统计"
      },
      // 图例设置
      legend: {
        labels: {
          padding: 30,
          // 使用圆形样式
          usePointStyle: true
        },
        // 显示位置
        position: 'bottom'
      },
      // tooltip提示样式
      tooltips: {
        enabled: true,
        // 同时显示x轴上的数据
        mode: 'index',
        // 通过回调修改tooltips的标题
        callbacks: {
          title: function (item) {
            return  item[0].xLabel + "元"
          }
        }
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
  };
  new Chart(top_up,top_up_data);


});
</script>
